<template>
    <section class="bk-layout-custom-component-wrapper container-kbnammjb">
        <div class="bk-layout-component-kbnammjb block241b2">
            <!-- eslint-disable -->
            <!-- prettier-ignore -->
            <p title=""   class='bk-layout-component-kbnammjb paragraph1b466'>{{bbsTitle}}</p>
            <!-- eslint-enable -->
            <!-- eslint-disable -->
            <!-- prettier-ignore -->
            <p title=""   class='bk-layout-component-kbnammjb paragraphAcd8f'>{{bbsContent}}</p>
            <!-- eslint-enable -->
            <bk-divider
                direction="horizontal"
                align="left"
                color="#dde4eb"
                class="bk-layout-component-kbnammjb divider282c4">
                评论
            </bk-divider>
        </div>
        <bk-input
            type="textarea"
            font-size="normal"
            :disabled="false"
            :readonly="false"
            :clearable="true"
            :show-controls="true"
            class="bk-layout-component-kbnammjb inputFcab0"
            v-model="comment">
        </bk-input>
        <bk-button
            title="hello world"
            size="normal"
            theme="primary"
            :disabled="false"
            :loading="false"
            class="bk-layout-component-kbnammjb buttonCda3c"
            @click="addCommentData">
            提交评论
        </bk-button>
        <bk-dialog v-model="isShowEdit"
            theme="primary"
            :mask-close="false"
            title="回复评论"
            @confirm="saveReply">
            <bk-input
                type="textarea"
                font-size="normal"
                :disabled="false"
                :readonly="false"
                :clearable="true"
                :show-controls="true"
                class="reply-input"
                v-model="content">
            </bk-input>
        </bk-dialog>
        <div
            class="bk-free-layout-kbnammjb free-layout-a6b2f"
            v-for="(freeLayoutA6b2fItem, freeLayoutA6b2fIndex) in commentList"
            :key="freeLayoutA6b2fIndex">
            <div class="main-view-img"></div>
            <div class="main-content">
                <div class="content-top">{{freeLayoutA6b2fItem.createUser}}
                    <span class="top-time">{{formattime(freeLayoutA6b2fItem.createTime)}}</span>
                </div>
                <div class="content-txt">{{freeLayoutA6b2fItem.comment }}</div>
                <span class="add-btn" @click="() => addReply(freeLayoutA6b2fItem.id)"><bk-icon type="dialogue" class="add-icon" />
                    {{filterList(freeLayoutA6b2fItem.id).length > 0 ? filterList(freeLayoutA6b2fItem.id).length : '回复'}}
                </span>

                <div class="reply-view" v-for="(reply, ind) in filterList(freeLayoutA6b2fItem.id)" :key="`reply${ind}`">
                    <div class="main-view-img"></div>
                    <div class="main-content">
                        <div class="content-top">{{reply.createUser}}
                            <span class="top-time">{{formattime(reply.createTime)}}</span>
                        </div>
                        <div class="content-txt">{{reply.content }}</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    /**
     * 请先安装 bk-magic-vue 组件库、bkui-vue-complex 复合组件库
     * bk-magic-vue 组件库: https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/index.html#/install
     * bkui-vue-complex 复合组件库: https://github.com/TencentBlueKing/lesscode-comp
     *
     * 如果页面使用了远程函数，单独使用本页面，需要确保项目 store 下有相应的方法，后端有相应的转发接口
     */

    import methodsMixin from '@/mixins/methods-mixin'
    export default {
        mixins: [methodsMixin],
        data () {
            function getInitVariableValue (defaultValue, defaultValueType) {
                let val = defaultValue.all
                if (defaultValueType === 1) val = defaultValue[window.BKPAAS_ENVIRONMENT]
                return val
            }
            return {
                bbsTitle: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                bbsContent: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                comment: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                commentList: getInitVariableValue(
                    { all: ['Jack', 'Lucy', 'Lily'], prod: ['Jack', 'Lucy', 'Lily'], stag: ['Jack', 'Lucy', 'Lily'] },
                    0
                ),
                isShowEdit: false,
                content: '',
                currentId: '',
                replyList: []

            }
        },

        created () {
            this.getData()
            this.getReplyList()
        },

        methods: {
            addReply (id) {
                this.currentId = id
                this.isShowEdit = true
            },
            saveReply () {
                this.$http.post('/data-source/user/tableName/reply', {
                    commentId: this.currentId,
                    content: this.content
                }).then(res => {
                    this.getReplyList()
                    this.isShowEdit = false
                    return res
                }).catch((err) => {
                    console.log(err)
                })
            },
            getReplyList () {
                this.$http.get('/data-source/user/tableName/reply').then(res => {
                    this.replyList = res?.data?.list
                    return res
                }).catch((err) => {
                    console.log(err)
                })
            },
            filterList (id) {
                return (this.replyList || []).filter(item => item.commentId === id)
            }

        }
    }

</script>
<style lang="css" scoped>
    .container-kbnammjb {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 20px;
        padding-bottom: 0px;
        height: 100%;
    }
    .bk-layout-row-kbnammjb {
        display: flex;
    }
    .bk-layout-row-kbnammjb:after {
        display: block;
        clear: both;
        content: '';
        font-size: 0;
        height: 0;
        visibility: hidden;
    }
    .bk-layout-col-kbnammjb {
        float: left;
        position: relative;
        min-height: 1px;
    }
    .bk-free-layout-kbnammjb {
        height: 500px;
        width: 100%;
        display: inline-block;
        position: relative;
    }
    .bk-free-layout-item-inner-kbnammjb {
        height: 100%;
        position: relative;
    }
    .bk-form-radio {
        margin-right: 20px;
    }
    .bk-form-checkbox {
        margin-right: 20px;
    }
    .echarts {
        width: 100%;
        height: 100%;
    }
    /* 设置 bk-exception 组件宽度为 100% */
    .bk-exception-img {
        width: 100%;
    }
    .bk-form-item {
        margin: 10px;
    }
    .bk-sideslider {
        margin: 0;
    }
    /* 设置 .bk-form-control 组件宽度为 auto */
    .bk-form-control {
        width: auto;
    }
    .bk-form-control .bk-input-text {
        font-size: 12px;
    }
    [align-horizontal-left] > *,
    [align-horizontal-center] > *,
    [align-horizontal-right] > *,
    [align-horizontal-space-between] > *,
    [align-vertical-top] > *,
    [align-vertical-center] > *,
    [align-vertical-bottom] > * {
        flex-shrink: 0;
    }
    [align-horizontal-left],
    [align-horizontal-center],
    [align-horizontal-right],
    [align-horizontal-space-between] {
        display: flex !important;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    [align-horizontal-left] {
        justify-content: flex-start;
    }
    [align-horizontal-center] {
        justify-content: center;
    }
    [align-horizontal-right] {
        justify-content: flex-end;
    }
    [align-horizontal-space-between] {
        justify-content: space-between;
    }
    [align-vertical-top],
    [align-vertical-center],
    [align-vertical-bottom] {
        display: flex !important;
        flex-wrap: wrap;
    }
    [align-vertical-top] {
        align-items: flex-start;
    }
    [align-vertical-center] {
        align-items: center;
    }
    [align-vertical-bottom] {
        align-items: flex-end;
    }
    [absolute-align-horizontal-left] {
        left: 0 !important;
    }
    [absolute-align-horizontal-center] {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    [absolute-align-horizontal-right] {
        left: unset !important;
        right: 0 !important;
    }
    [absolute-align-vertical-top] {
        top: 0 !important;
    }
    [absolute-align-vertical-center] {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    [absolute-align-vertical-bottom] {
        top: unset !important;
        bottom: 0 !important;
    }
    [absolute-align-horizontal-center][absolute-align-vertical-center] {
        transform: translate(-50%, -50%) !important;
    }

    .bk-layout-component-kbnammjb.block241b2 {
        display: block;
        width: 100%;
        background-color: #ffffff;
    }
    .bk-layout-component-kbnammjb.paragraph1b466 {
        display: inline-block;
        width: 100%;
        height: 44px;
        text-align: center;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-left: 0;
    }
    .bk-layout-component-kbnammjb.paragraphAcd8f {
        display: inline-block;
        width: 100%;
        height: 204px;
        text-align: left;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 8px;
        margin-left: 0;
    }
    .bk-layout-component-kbnammjb.divider282c4 {
        display: block;
        margin-top: 8px;
    }
    .bk-layout-component-kbnammjb.inputFcab0 {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }
    .bk-layout-component-kbnammjb.buttonCda3c {
        display: inline-block;
        vertical-align: middle;
        margin-top: 8px;
    }
    .free-layout-a6b2f {
        height: 101px;
        margin-top: 8px;
        background-color: #ffffff;
    }
    .bk-layout-component-kbnammjb.text1e085 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-kbnammjb.textBc683 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-kbnammjb.text9b969 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .main-view-img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #eee;
    }
    .main-content{
        width: 100%;
        margin-left: 15px;
        padding: 5px;
    }
    .content-top{
        color: #252933;
        font-weight: 500;
        position: relative;
    }
    .top-time{
        font-size: 12px;
        color: #a6a9af;
        position: absolute;
        right: 20px;
    }
    .content-txt{
        color: #999;
        margin-top: 10px;
        line-height: 22px;
    }
    .add-btn{
        display: inline-block;
        margin-top: 10px;
        cursor: pointer;
        color: #999;
    }
    .add-btn:hover{
        color: blue;
    }
    .add-btn .add-icon{

        font-size: 14px;
    }
    .free-layout-a6b2f{
        min-height: 74px;
        margin-top: 15px;
        background-color: #ffffff;
        padding: 20px;
        display: flex;
        align-content: center;
        justify-items: center;
    }
    .bk-free-layout-kbnammjb{
        width: 100%;
    }
    .bot-main-icon{
        margin-bottom: 10px;
    }
    .bot-main-icon .icon-style{
        font-size: 16px !important;
        margin-right: 5px;
    }
    .reply-view{
        padding: 16px;
        background: rgba(247,248,250,.7);
        border-radius: 4px;
        display: flex;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
    }
    .reply-input{
        width: 100%;
    }
</style>
